<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店-粤亮旅游网</title>
    <!-- 公共部分 -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 核心内容css -->
    <link rel="stylesheet" href="../css/hotel.css">
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="../favicon.ico"/>

    <script src="../js/jquery-3.3.1.js"></script>
    <!-- 引入字体图标 -->
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?rghiog');
            src: url('fonts/icomoon.eot?rghiog#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?rghiog') format('truetype'),
            url('fonts/icomoon.woff?rghiog') format('woff'),
            url('fonts/icomoon.svg?rghiog#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>
    <style>
        /* 奔跑熊大 */
    </style>


</head>

<body>
<section class="shortcut">
    <div class="top-bgc">
        欢迎来到粤亮旅游网!
    </div>
    <div class="w">
        <div class="mine">
            <ul>
                <li class="fl">
                    <a href="collect.html">我的收藏</a>
                    <a href="orders.html" style="padding: 0 10px ">我的订单</a>
                    <a href="#" class="logout">退出</a>
                </li>
            </ul>
        </div>
    </div>
</section>
<!-- 导航栏 -->
<div class="nav w">
    <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="#">分类</a></li>
        <li><a href="#">旅游套餐</a></li>
        <li><a href="train.html">火车票</a></li>
        <li><a href="#" style="color: skyblue; font-size: 30px;">酒店</a></li>
        <li><a href="#">租车</a></li>
        <li><a href="#">活动</a></li>
        <li><a href="#">购物车</a></li>
        <li><a href="#">优惠券</a></li>
    </ul>
</div>
<!-- 头部 -->


<!-- 核心内容开始 -->
<div class="box w">
    <div class="hotel-top" style=" height: 400px;">
        <!-- 预定酒店 -->
        <div class="reservation" style="float: left;">
            <!-- 预定酒店 -->
            <div class="search-hotel">
                <!-- 奔跑熊大 -->
                <div class="mountain">
                    <div class="bear"></div>
                </div>
                <!-- 搜寻酒店 -->
                <div class="top-title">
                    <div class="l-tit">预定酒店</div>
                    <div class="r-tit">安心订放心住</div>
                </div>
            </div>
            <form id="hotel-search">
                <input type="text" class="destination" id="destination" placeholder="目的地:">
                <!-- 提交按钮 -->
                <input type="submit" value="搜索" class="search-btn">

            </form>
        </div>
        <div class="showing-hotel"
             style="width: 550px;height: 400px; background-color:rgba(255, 255, 255, 0.1);position: relative;float: right;">
            <!-- 优秀酒店展示 -->
            <div class="slider">
                <div class="slider-wrapper">
                    <img src="../images/slider09.jpg" alt=""/>
                </div>
                <div class="slider-footer">
                    <p>张家界梓山漫居</p>
                    <ul class="slider-indicator">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="toggle">
                        <button class="prev">&lt;</button>
                        <button class="next">&gt;</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 酒店推荐模块开始 -->
    <div class="hotel-recommend">
        <h2>酒店推荐</h2>
        <div class="hotel-box">
            <ul class="clearfix">

            </ul>
        </div>
    </div>
    <!-- 酒店推荐模块结束 -->

</div>

</div>
<!-- 核心内容结束 -->

<!-- 尾部 -->
<footer class="footer">
    <div class="w">
        <div class="mod_service">
            <ul>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>价格保证</h4>
                        <p>同类产品,保证低价</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>退订保障</h4>
                        <p>因特殊情况影响出行,保证退订</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>救援保障</h4>
                        <p>旅途中意外情况,保证援助</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>贴心服务</h4>
                        <p>快速响应,全年无休</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="mod_help">
            <dl>
                <dt>关于我们</dt>
                <dd><a href="#">粤亮简介</a></dd>
                <dd><a href="#">旅游度假资质</a></dd>
                <dd><a href="#">网络地图</a></dd>
                <dd><a href="#">诚聘英才</a></dd>
                <dd><a href="#">知识产权声明</a></dd>
                <dd><a href="#">用户协议</a></dd>
            </dl>
            <dl>
                <dt>加盟合作</dt>
                <dd><a href="#">团购预约</a></dd>
                <dd><a href="#">分销系统</a></dd>
                <dd><a href="#">平台开放</a></dd>
                <dd><a href="#">供应商结盟合作</a></dd>
            </dl>
            <dl>
                <dt>联系我们</dt>
                <dd><a href="#">门店信息</a></dd>
                <dd><a href="#">意见反馈</a></dd>
                <dd><a href="#">不良信息处置方法</a></dd>

            </dl>
            <dl>
                <dt>订购指南</dt>
                <dd><a href="#">门票使用</a></dd>
                <dd><a href="#">常见问题</a></dd>
            </dl>

            <dl>
                <dt>售后服务</dt>
                <dd><a href="#">退货说明</a></dd>
                <dd><a href="#">投诉建议</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>
                    <img src="../images/了解更多.png" alt="">
                    粤亮客户端
                </dd>
            </dl>
        </div>
        <div class="mod_copyright">
            <div class="links">
                <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机粤亮 | 友情链接 | 销售联盟 | 粤亮社区 |
                品优购公益 | English Site | Contact U
            </div>
            <div class="copyright">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                京ICP备08001421号京公网安备110108007702
            </div>
        </div>
    </div>
</footer>
<script>
    // 获取图片链接
    function getImage(image) {
        return `/common/download?name=${image}`;
    }

    // 发送AJAX请求
    function getFoods() {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "/hotel", true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    renderFoods(response.data);
                } else {
                    console.error("Error: " + xhr.status);
                }
            }
        };
        xhr.send();
    }

    // 渲染菜品信息
    function renderFoods(hotels) {
        const container = document.querySelector(".hotel-box ul");
        let html = "";
        hotels.forEach(function (hotel) {
            const image = getImage(hotel.image);
            html += `
                  <li>
            <a href="#" title="${hotel.hotelName}" onclick="hotelDetail(${hotel.hid})">
              <p class="img-box">
                <img src="${image}" alt="${hotel.hotelName}">
              </p>
              <p class="hotel-name">${hotel.hotelName}</p>
              <div class="hotel-score">
                <span class="num">${hotel.score}</span>
                "很好"
              </div>
              <p class="hotel-address">${hotel.hotelAddress}</p>
              <div class="price">
                <span class="rmb">¥</span>${hotel.price}<span class="rmb">起</span>
              </div>
            </a>
          </li>
                `
        });
        container.innerHTML = html;
    }

    // 页面加载完成后发送AJAX请求
    window.addEventListener("DOMContentLoaded", function () {
        // checkLogin()
        getFoods();
    })


    $(document).ready(function () {
        $("#hotel-search").submit(function (event) {
            event.preventDefault(); // 阻止表单默认提交行为

            const destination = $("#destination").val();
            console.log(destination)
            $.ajax({
                url: `/hotel/search?destination=${destination}`,
                type: "GET",
                success: function (response) {
                    if (response.success === 1) {
                        window.location.href = 'hotel-search.html?destination=' + destination
                    } else {
                        alert(response.msg)
                    }
                },
                error: function () {
                    alert("请求失败")
                }
            });
        });
    });

    function hotelDetail(hid) {
        console.log("Querying by ID:", hid);
        $.ajax({
            url: `/hotel/${hid}`,
            type: "GET",
            success: function (response) {
                localStorage.setItem('hotelDetail', JSON.stringify(response.data));
                window.location.href = 'hotel-detail.html?hid=' + hid
                // 这里可以处理响应数据并更新页面
            },
            error: function () {
            }
        });

    }

    const logout = document.querySelector('.logout')
    logout.addEventListener('click', function () {
        $.ajax({
            url: "/logout",
            type: "POST",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    alert("退出成功");
                    localStorage.removeItem('responseData');
                    localStorage.removeItem('hotelDetail')
                    // 进行跳转或其他操作
                    window.location.href = 'index.html'
                } else {
                    alert("退出失败，请检查用户名和密码");
                }
            },
            error: function () {
                alert("请求失败");
            }
        });
    })
</script>
<!-- 旅游js -->
<script src="../js/hotel.js"></script>
</body>

</html>